import {
  ActivityIndicator,
  Dimensions,
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {PaymentReceipt} from '../../../types/order';
import {useTranslation} from 'react-i18next';
import {
  primaryBackgroundColor,
  primaryColor,
  primaryColor2,
  primaryColor3,
  secondaryHoverBackgroundColor,
} from '../../../theme/default';
import {useEffect, useState} from 'react';
import {userSolanaTransactionHistory} from '../../../hooks/useSolana/useSolanaTransactionHistory';

import CheckIcon from '../../../assets/icons/round_check.svg';
import {useAccountProvider} from '../../../hooks/useAccountProvider';
import {formatTimestamp, parseValue, toShortAddress} from '../../../utils';
import CopyIcon from '../../../assets/icons/copy.svg';
import Toast from 'react-native-toast-message';
import Clipboard from '@react-native-clipboard/clipboard';
import {UpNetworkLogo} from '../UpNetworkLogo';

type PaymentReceiptProp = {
  receipt: PaymentReceipt;
};

type ReceiptStatus = 'Pending' | 'Confirmed';

const {width} = Dimensions.get('window');

export default function PaymentReceiptComponent({
  receipt,
}: Readonly<PaymentReceiptProp>) {
  const {t} = useTranslation();
  const {getParsedTransactionBySignature} = userSolanaTransactionHistory();
  const [status, setStatus] = useState<ReceiptStatus>('Pending');
  const {userInfo} = useAccountProvider();

  const handleCopy = (input: string) => {
    Clipboard.setString(input);
    Toast.show({
      type: 'info',
      text1: t('copied'),
      position: Platform.OS === 'android' ? 'top' : 'bottom',
    });
  };

  useEffect(() => {
    const interval = setInterval(async () => {
      const tx = await getParsedTransactionBySignature(receipt.signature);
      if (tx != null) {
        clearInterval(interval);
        setStatus('Confirmed');
      }
    }, 2000);

    return () => {
      clearInterval(interval);
    };
  }, []);
  return (
    <View style={styles.container}>
      <View style={styles.topContainer}>
        <View style={styles.amountContainer}>
          <Text
            style={{
              fontSize: 15,
              fontWeight: '600',
              color: primaryColor3,
              marginBottom: 5,
            }}>
            {t('amount')}
          </Text>
          <Text style={{fontSize: 18, fontWeight: '600', color: primaryColor2}}>
            {receipt.amount} {receipt.tokenSymbol}
          </Text>
        </View>
        <View style={styles.statusContainer}>
          {status == 'Pending' ? (
            <View style={styles.statusContent}>
              <ActivityIndicator
                size="small"
                color={primaryColor}
                style={{marginRight: 4}}
              />
              <Text
                style={{
                  color: primaryColor,
                  fontSize: 18,
                  marginLeft: 6,
                  fontWeight: '600',
                }}>
                {t('pending')}
              </Text>
            </View>
          ) : (
            <View style={styles.statusContent}>
              <CheckIcon width={24} height={24} color="green" />
              <Text
                style={{
                  color: 'green',
                  fontSize: 18,
                  marginLeft: 6,
                  fontWeight: '600',
                }}>
                {t('confirmed')}
              </Text>
            </View>
          )}
        </View>
      </View>

      <View style={styles.middleContainer}>
        <View style={styles.fromContainer}>
          <View style={styles.infoContainer}>
            <Text style={styles.title}>
              {t('from')} {userInfo?.displayName}
            </Text>
            <Text style={styles.content}>
              {toShortAddress(userInfo!.solanaAddress)}
            </Text>
          </View>
          <TouchableOpacity
            onPress={() => {
              handleCopy(userInfo!.solanaAddress);
            }}
            style={styles.copyContainer}>
            <CopyIcon width={24} height={24} color={primaryColor2}></CopyIcon>
          </TouchableOpacity>
        </View>
        <View style={styles.toContainer}>
          <View style={styles.infoContainer}>
            <Text style={styles.title}>
              {t('to')} {receipt.merchantName}
            </Text>
            <Text style={styles.content}>
              {toShortAddress(receipt.toAddress)}
            </Text>
          </View>
          <TouchableOpacity
            onPress={() => {
              handleCopy(receipt.toAddress);
            }}
            style={styles.copyContainer}>
            <CopyIcon width={24} height={24} color={primaryColor2}></CopyIcon>
          </TouchableOpacity>
        </View>
      </View>

      <View style={styles.middleContainer}>
        <View style={styles.commonContainer1}>
          <Text style={styles.title}>{t('time')}</Text>
          <Text style={styles.content}>
            {formatTimestamp(receipt.timestamp)}
          </Text>
        </View>
        <View style={styles.fromContainer}>
          <View style={styles.infoContainer}>
            <Text style={styles.title}>{t('orderId')}</Text>
            <Text style={styles.content}>
              {toShortAddress(receipt.signature)}
            </Text>
          </View>
          <TouchableOpacity
            onPress={() => {
              handleCopy(receipt.signature);
            }}
            style={styles.copyContainer}>
            <CopyIcon width={24} height={24} color={primaryColor2}></CopyIcon>
          </TouchableOpacity>
        </View>
        <View style={styles.commonContainer2}>
          <Text style={styles.title}>{t('fees')}</Text>
          <Text style={styles.content}>{parseValue(receipt.fees, 9)} SOL</Text>
        </View>
      </View>
      <View style={styles.logo}>
        <UpNetworkLogo color={primaryColor}></UpNetworkLogo>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: primaryBackgroundColor,
  },
  topContainer: {
    marginTop: 48,
    width: width - 48,
    height: 64,
    justifyContent: 'space-between',
    alignItems: 'center',

    flexDirection: 'row',
  },
  amountContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  statusContainer: {
    width: 140,
    alignItems: 'flex-end',
    justifyContent: 'center',
  },
  statusContent: {
    justifyContent: 'flex-end',
    width: '100%',
    alignItems: 'center',
    flexDirection: 'row',
  },
  middleContainer: {
    marginTop: 32,
    width: width - 32,
    paddingHorizontal: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: primaryColor,
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  fromContainer: {
    width: '100%',
    paddingVertical: 16,
    borderBottomColor: secondaryHoverBackgroundColor,
    borderBottomWidth: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
  },
  commonContainer1: {
    width: '100%',
    paddingVertical: 16,
    borderBottomColor: secondaryHoverBackgroundColor,
    borderBottomWidth: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  commonContainer2: {
    width: '100%',
    paddingVertical: 16,
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  infoContainer: {
    flex: 1,
  },
  title: {
    color: primaryColor3,
    fontSize: 13,
    marginBottom: 4,
  },
  content: {
    color: primaryColor2,
    fontSize: 14,
  },
  copyContainer: {
    width: 48,
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  toContainer: {
    width: '100%',

    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    paddingVertical: 16,
  },
  logo: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    bottom: 48,
    height: 32,
  },
});
